*{
    box-sizing: border-box;
}


/* navigation bar */
#nav{
    display: flex;
    list-style-type: none ;
    background-color: gray;
    color: white;
    margin: 0;
    padding: 10px;
    font-size: 35px;
    position: sticky;
    top:0;
    z-index: 1;
     /* border: 2px solid red; */
}


      /* This is to give the content on the nav bar a unique look  */
li a{
    margin: 0 30px;
    padding: 10px ;
    text-align: center;
     text-decoration:none ;

}

      /* when the mouse hovers over a link  */
li a:hover{
    color:white;
    background-color: black;
}

li a:visited{
    color: white;
}

      /* This is for the current page the user is on, will be used on other pages */
#current{
    background-color: black;
    color: white;
}


     /* This is the large container that tells the user what page they are on, it is black for this specific page */
.titlecontainer{
   background-color: black;
   height: 750px;
   color: white;
   text-align: center;
  border: 2px solid black;
  width: 100%;
 
}


    /* title for text in the titlecontainer class */
.title{
    margin-top: 200px;
    padding: 40px;
    font-size: 90px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}



.headers{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 60px;
}


    /* This is where the gallery will be stored */
#gallery{
    display: flex;
    list-style-type: none ;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 5px ;
     /* border: 2px solid red; */
}



#gallery  img{
    width:400px;

}

  /*This helps with the positioning the descriptions of an image  when the mouse is hovered over them */

li{
    position: relative;
}


#gallery li{
    text-decoration:none ;
    margin: 10px;
}


/* This holds the description of the image  */
.overlay{
    position: absolute;  /* this restricts the description to fitt the image */
    color: white;
    transition: .5s ease;
    opacity:0;    /* to prevent the text from being visible */
    text-align: center;
    padding: 20px;
    top: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
}


   /* This reveals the description when the mouse hovers*/
li:hover .overlay {
    opacity: 1;
   
  }